<template>
    <div id="mCom" class="mCom">
        <div class="search-box">
        <div class="search">
            <el-form inline>
                <el-form-item label="数据集名称：">
                    <el-input size="medium" disabled v-model="$route.query.tableName" style="width: 240px; margin-right: 10px" placeholder="请输入数据集名称"></el-input>
                </el-form-item>
                <!-- <el-form-item label="">
                    <el-select size="medium" v-model="paginationSet.dbType" @change="handleSelect" placeholder="请选择数据子集">
                      <el-option v-for="item in selDataType" :key="item.id" :value="item.name" :label="item.name"></el-option>
                    </el-select>
                </el-form-item> -->
                <el-form-item label="">
                    <!-- <el-button size="medium" type="primary" icon="el-icon-search" @click="handleSetSearch">搜索</el-button> -->
                    <el-button size="medium" type="primary" icon="el-icon-upload el-icon--right" @click="handleSubmit">{{dialogTitle}}</el-button>
                </el-form-item>
            </el-form>
        </div>
       </div>
       <div style="margin: 10px 10px 0 0">
       <el-form :model="form"  ref="form" :rules="DataSetListRules">
        <el-table
            :header-cell-style="{background:'#F5F5F5'}"
            v-loading="loading"
            :data="form.DataSetList"
              border
             >
              <el-table-column label="字段名称" align="center" prop="name">
                     <template slot-scope="{row}">
                       <el-form-item label="" style="padding-top: 15px;">
                            <el-input disabled :value="row.name"></el-input>
                         </el-form-item>
                  </template>
               </el-table-column>
      <!-- <el-table-column label="字段描述" align="center" prop="dataSourceName">
        <template slot-scope="{row}">
            <el-form-item label="" style="padding-top: 15px;">
                <el-input v-model="row.dataSourceName"></el-input>
            </el-form-item>
        </template>
      </el-table-column>
      <el-table-column label="特征名称" align="center" prop="dataSourceName">
        <template slot-scope="{row}">
            <el-form-item label="" style="padding-top: 15px;">
                <el-input v-model="row.dataSourceName"></el-input>
            </el-form-item>
        </template>
      </el-table-column> -->
      <el-table-column label="字段类型" align="center" prop="dataType">
        <template slot-scope="{row}">
            <el-form-item label="" style="padding-top: 15px;">
                <el-input disabled v-model="row.dataType"></el-input>
            </el-form-item>
        </template>
      </el-table-column>
      <!-- <el-table-column label="转换类型" align="center" prop="dataSourceName">
        <template slot-scope="{row}">
            <el-form-item label="" style="padding-top: 15px;">
              <el-select size="medium" v-model="row.paginationDbType"  @change="handleChangeType(row)" placeholder="请选择转换类型">
                <el-option v-for="item in changeType" :key="item.id" :value="item.id" :label="item.name"></el-option>
              </el-select>
            </el-form-item>
        </template>
      </el-table-column> -->
      <el-table-column label="操作方式" align="center" prop="">
        <template slot-scope="{row}">
            <el-form-item label="" style="padding-top: 15px;">
              <el-select size="medium" v-model="row.type" @change="handleChange(row)" placeholder="请选择操作方式">
                <el-option v-for="item in operationStyle" :key="item.id" :value="item.id" :label="item.name"></el-option>
              </el-select>
            </el-form-item>
        </template>
      </el-table-column>
      <el-table-column label="字段名称" align="center" >
        <template slot-scope="scope">
            <el-form-item v-if="scope.row.type === 'merge'" label="" :prop="`DataSetList.${scope.$index}.columnNames`" :rules="DataSetListRules.columnNames" style="padding-top: 15px;">
              <el-select size="medium" v-model="scope.row.columnNames" multiple collapse-tags placeholder="请选择字段名称">
                <el-option v-for="item in fieldName.filter(item=> item!== scope.row.name)" :key="item.id" :value="item" :label="item"></el-option>
              </el-select>
            </el-form-item>
            <span v-else>{{scope.row.dataSetName}}</span>
        </template>
      </el-table-column>
      <el-table-column label="方式" align="center" prop="">
        <template slot-scope="{row}">
            <el-form-item v-if="row.type === 'merge'" label="" style="padding-top: 15px;">
              <el-select size="medium" v-model="row.delimiter" placeholder="请选择方式">
                <el-option v-for="item in styles" :key="item.id" :value="item.id" :label="item.name"></el-option>
              </el-select>
            </el-form-item>
            <span v-else>{{row.dataSetName}}</span>
        </template>
      </el-table-column>
      <el-table-column label="名称" align="center" prop="">
        <template slot-scope="scope">
            <el-form-item v-if="scope.row.type === 'merge'" label="" :prop="`DataSetList.${scope.$index}.asColumn`" :rules="DataSetListRules.asColumn"  style="padding-top: 15px;">
                <el-input v-model="scope.row.asColumn"></el-input>
            </el-form-item>
            <span v-else>{{scope.row.dataSetName}}</span>
        </template>
      </el-table-column>
    </el-table>
    </el-form>
       </div>
       <el-dialog
  title="提示"
  :visible.sync="dialogVisible"
  width="30%"
>
  <el-form :model="formName" ref="formName" :rules="formNameRules">
    <el-form-item label="数据集名称：" prop="childrenSetName">
       <el-input type="text" v-model="formName.childrenSetName" :disabled="dialogVisibleSurface" style="width:60%" placeholder='请输入数据集名称'></el-input>
    </el-form-item>
    <el-form-item label="目标表名称：" prop="childrenTargetName">
      <el-input type="text" v-model="formName.childrenTargetName"  :disabled="dialogVisibleSurface"  style="width:60%" placeholder='请输入目标表名称'></el-input>
    </el-form-item>
  </el-form>

  <span slot="footer" class="dialog-footer">
    <el-button @click="cancel">取 消</el-button>
    <el-button type="primary" @click="confirm">确 定</el-button>
  </span>
</el-dialog>
    </div>
</template>
<script>
import {
  datasubsetInfo,
  datasubsetList,
  newSubsetTable,
  addSetForm,
  getSonDataSource,
  editInfo,
  delSurface
} from "@/api/sourceDetail";
export default {
  name: "sourceDataMan",
  data() {
    return {
      dialogTitle:
        this.$route.query.id == this.$route.query.parentId ? "提交" : "编辑",
      DataSetListRules: {
        columnNames: [
          {
            required: true,
            message: "请选字段",
            trigger: "change"
          }
        ],
        asColumn: [
          {
            required: true,
            validator: this.checkData,
            trigger: "blur"
          }
        ]
      },
      form: {
        // 表格数据
        DataSetList: []
      },
      selDataType: [],
      formName: {
        childrenSetName: "",
        childrenTargetName: ""
      },
      formNameRules: {
        childrenSetName: [
          { required: true, message: "请输入数据集名称", trigger: "blur" }
        ],
        childrenTargetName: [
          { required: true, validator: this.checkData, trigger: "blur" }
        ]
      },
      dialogVisible: false,
      dialogVisibleSurface: false,
      loading: false,
      paginationSet: {},
      dataType: [
        // { name: "数据集元数据管理版本1", id: "mysql" },
        // { name: "数据集元数据管理版本2", id: "oracle" },
        // { name: "数据集元数据管理版本3", id: "postgresql" }
      ],
      fieldName: [],
      // 转换类型
      changeType: [
        { name: "整数型", id: "1" },
        { name: "浮点型", id: "2" },
        { name: "长整型", id: "3" },
        { name: "字符型", id: "4" },
        { name: "时间型", id: "5" }
      ],
      // 操作方式
      operationStyle: [
        { name: "删除", id: "" },
        { name: "合并", id: "merge" },
        { name: "无", id: "none" }
        // { name: "分组", id: "3" }
      ],
      // 方式
      styles: [
        { name: "逗号", id: "," },
        { name: "空格", id: " " },
        { name: "分号", id: ";" }
      ]
    };
  },
  mounted() {
    // this.getSubsetList();
    if (this.$route.query.id == this.$route.query.parentId) {
      this.getDatasubsetInfo();
    } else {
      this.getSonDataSource();
    }
  },
  methods: {
    checkData(rule, value, callback) {
      if (!value) {
        callback(new Error("请输入名称"));
      }
      if (value) {
        if (/[\u4E00-\u9FA5]/g.test(value)) {
          callback(new Error("不能包含中文!"));
        } else {
          callback();
        }
      }
      callback();
    },
    getSonDataSource() {
      getSonDataSource(this.$route.query.id).then(res => {
        this.formName.childrenSetName = res.data.dataSetName;
        this.formName.childrenTargetName = res.data.importTableName;
        if (res.status == "SUCCESS") {
          this.form.DataSetList = JSON.parse(res.data.sonDetail);
          this.form.DataSetList.forEach(item => {
            item.columnNames.forEach(aItem => {
              if (item.columnNames.indexOf(item.name) > -1) {
                item.columnNames.splice(aItem.indexOf(item.name), 1);
              }
            });
          });

          console.log(
            "%c 🍭  this.form.DataSetList : ",
            "font-size:20px;background-color: #ED9EC7;color:#fff;",
            this.form.DataSetList
          );
          this.fieldName = this.form.DataSetList.map(item => {
            return item.name;
          });
        }
      });
    },
    handleSelect(val) {
      datasubsetInfo(val).then(res => {
        this.form.DataSetList = res.data.columns;
        if (this.DataSetList && this.form.DataSetList.length > 0) {
          this.form.DataSetList.forEach(item => {
            this.$set(item, "type", "none");
            this.$set(item, "delimiter", ",");
            this.$set(item, "columnNames", []);
            this.$set(item, "asColumn", "");
          });
          this.fieldName = this.form.DataSetList.map(item => {
            return item.name;
          });
        }
      });
    },
    //数据子集查询
    getSubsetList() {
      datasubsetList(this.$route.query.id).then(res => {
        if (res.status == "SUCCESS") {
          this.selDataType = res.data;
        }
      });
    },
    getDatasubsetInfo() {
      datasubsetInfo(this.$route.query.importTableName).then(res => {
        this.form.DataSetList = res.data.columns;
        if (this.form.DataSetList && this.form.DataSetList.length > 0) {
          this.form.DataSetList.forEach(item => {
            this.$set(item, "type", "none");
            this.$set(item, "delimiter", ",");
            this.$set(item, "columnNames", []);
            this.$set(item, "asColumn", "");
          });
          this.fieldName = this.form.DataSetList.map(item => {
            return item.name;
          });
        }
      });
    },
    //转化类型
    handleChangeType(item) {
      //  this.$set(item, "dataType", item.paginationDbType);
    },
    handleChange(item) {
      this.$set(item, "columnNames", []);
      this.$set(item, "delimiter", ",");
      this.$set(item, "asColumn", "");
    },
    handleSubmit() {
      this.$refs.form.validate(val => {
        if (val) {
          this.dialogVisible = true;
          if (this.dialogTitle == "编辑") {
            this.dialogVisibleSurface = true;
          } else {
            this.dialogVisibleSurface = false;
          }
        }
      });
    },
    cancel() {
      this.dialogVisible = false;
      if (this.dialogTitle == "提交") {
        this.formName.childrenSetName = "";
        this.formName.childrenTargetName = "";
      }
      this.$refs.formName.clearValidate();
    },
    confirm() {
      this.$refs.formName.validate(val => {
        if (val) {
          this.form.DataSetList.forEach((item, index) => {
            if (item.type == "") {
              this.form.DataSetList.splice(index, 1);
            }
            if (item.type == "merge") {
              item.dataType = "text";
            }

            if (item.columnNames == []) {
              item.columnNames[0] = item.name;
            } else {
              item.columnNames.push(item.name);
            }
          });
          if (this.dialogTitle == "提交") {
            addSetForm({
              dataSetName: this.formName.childrenSetName,
              importTableName: this.formName.childrenTargetName,
              parentId: this.$route.query.parentId,
              sonDetail: JSON.stringify(this.form.DataSetList),
              dataSetSourceTable: this.$route.query.importTableName
            }).then(res => {
              if (res.status == "SUCCESS") {
                // this.$notify({
                //   title: "提示",
                //   message: res.message,
                //   type: "success"
                // });
                this.$message.success(res.message);
                newSubsetTable({
                  parentTableName: this.$route.query.importTableName,
                  childrenTableName: this.formName.childrenTargetName,
                  dataSetColumnsList: this.form.DataSetList
                }).then(result => {
                  if (result.status == "SUCCESS") {
                    // this.$notify({
                    //   title: "提示",
                    //   message: res.message,
                    //   type: "success"
                    // });
                    this.$router.push("/home/dataSet");
                  } else {
                    // this.$notify({
                    //   title: "提示",
                    //   message: res.message,
                    //   type: "error"
                    // });
                    this.$message.error(res.message);
                  }
                  this.getDatasubsetInfo();
                  this.childrenTableName = "";
                  // this.getSubsetList();
                });
              } else {
                // this.$notify({
                //   title: "提示",
                //   message: res.message,
                //   type: "error"
                // });
                this.$message.error(res.message);
              }
            });
          } else {
            delSurface(this.$route.query.importTableName).then(res => {
              editInfo({
                id: this.$route.query.id,
                dataSetName: this.formName.childrenSetName,
                importTableName: this.formName.childrenTargetName,
                sonDetail: JSON.stringify(this.form.DataSetList),
                parentId: this.$route.query.parentId,
                dataSetSourceTable: this.$route.query.dataSetSourceTable
              }).then(res => {
                this.dialogVisible = false;

                if (res.status == "SUCCESS") {
                  // this.$notify({
                  //   title: "提示",
                  //   message: res.message,
                  //   type: "success"
                  // });
                  this.$message.success(res.message);
                  newSubsetTable({
                    parentTableName: this.$route.query.dataSetSourceTable,
                    childrenTableName: this.formName.childrenTargetName,
                    dataSetColumnsList: this.form.DataSetList
                  }).then(result => {
                    if (result.status == "SUCCESS") {
                      // this.$notify({
                      //   title: "提示",
                      //   message: res.message,
                      //   type: "success"
                      // });
                      this.$router.push("/home/dataSet");
                    } else {
                      // this.$notify({
                      //   title: "提示",
                      //   message: res.message,
                      //   type: "error"
                      // });
                      this.$message.error(res.message);
                    }
                    this.getDatasubsetInfo();
                    this.childrenTableName = "";
                    // this.getSubsetList();
                  });
                } else {
                  // this.$notify({
                  //   title: "提示",
                  //   message: res.message,
                  //   type: "error"
                  // });
                  this.$message.error(res.message);
                }
              });
            });
          }
          this.dialogVisible = false;
        }
      });
    },
    // 搜索按钮
    handleSetSearch() {}
  }
};
</script>
<style scoped>
.mCom .search-box {
  width: 99%;
  height: 30px;
  line-height: 30px;
  margin: 20px 0;
  display: flex;
  justify-content: space-between;
}
</style>
